<template>
  <div>
    <div class="ContentDetails" ref="ContentDetails">
      <div class="header-Details">
        <div class="head-Details" v-show="isshow" >
          <router-link tag="div" to="/DetailView" class="left">
            <svg
              t="1667203819076"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1759"
              width="200"
              height="200"
            >
              <path
                d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
                p-id="1760"
                fill="#c7c7c7"
              ></path>
              <path
                d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
                p-id="1761"
                fill="#c7c7c7"
              ></path>
            </svg>
          </router-link>

          <div class="right">
            <router-link to="/RecommendView">
              <svg
              t="1666602620237"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4102"
              width="200"
              height="200"
              class="icon"
            >
              <path
                d="M954.058556 493.157863c-43.23264-44.004213-422.432055-429.957449-423.904593-431.429986-4.974291-4.975315-12.541641-7.496741-22.49227-7.496741-8.815783 0-15.785521 2.49789-20.711717 7.424086L66.122465 497.179456l0 8.266267c0 18.583241 6.119371 36.461423 17.232476 50.341548 10.562567 13.193487 24.000624 21.069875 35.945677 21.069875l65.450664 0 0 314.966485c0 55.979966 38.562271 75.842339 71.585385 75.842339 2.1295 0 14.32117-0.169869 90.969874-0.169869s70.608128-75.43711 70.608128-75.43711L417.91467 646.39592c0-9.287527 7.496741-16.362666 11.249205-16.362666l48.461735 0 0-40.904619-48.462758 0c-27.782763 0-52.154847 26.759457-52.154847 57.267285l0 245.477854c0 0-1.861394 34.718733-29.751604 34.718733-11.766998 0-89.919962 0.169869-90.920756 0.169869-30.67872 0-30.67872-26.297946-30.67872-34.938744L225.656925 535.952528 121.464911 535.952528c-3.078105-1.87879-11.418051-9.230222-13.795191-22.902616L508.582669 98.130971c52.142567 53.054333 362.372168 368.81081 410.150334 417.437298-0.699941 9.211802-2.52859 13.670348-3.717671 15.657608-0.86367 1.438769-1.606591 2.684132-6.225795 2.684132L804.540218 533.910009l-1.075495 355.077018c-2.52245 8.207939-13.405311 37.604456-39.892569 37.604456 0 0-40.298821 0-75.330686 0s-39.161928-21.097504-39.149649-34.718733c0.079818-84.74408 0.188288-237.419318-0.065492-246.077511-0.245593-8.330736-3.206018-21.429055-10.780531-33.213449-9.723455-15.123442-24.049742-23.454178-40.342824-23.454178l-55.19509 0 0 40.904619 55.19509 0c5.418406 0 10.094916 12.181437 10.235109 16.96437 0.222057 7.557116 0.138146 149.410891 0.048095 244.87615-0.020466 21.3871 0.603751 75.622328 80.055291 75.622328 51.746548 0 75.330686 0 75.330686 0 26.396183 0 48.812729-12.697183 64.826448-36.719296 10.906397-16.35448 14.9679-32.391734 15.395642-34.167171l1.528819-321.79603 63.466474 0c17.935488 0 32.611745-8.020674 41.328267-22.584368 6.597255-11.024078 9.80532-25.65838 9.80532-44.737924l0-8.366551L954.058556 493.157863z"
                p-id="4103"
                fill="#ffffff"
              ></path>
            </svg>
            </router-link>
            

            <div>
              <svg
              t="1667205075554"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2306"
              width="200"
              height="200"
            >
              <path
                d="M221 592c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z"
                p-id="2307"
                fill="#ffffff"
              ></path>
            </svg>
            </div>
           
          </div>
        </div>
      </div>

      <div class="main" ref="main"  @click="isshow=!isshow">
        <h3>第一章 被迫嫁人(1/3)</h3>

        <p>
          “我警告你，不嫁给刘少，我就断了你那个废物哥哥的药，让他自生死灭。”
        </p>
        <p>
          “我们夏家养了你们兄妹这么多年，现在让你付出一点都不愿意，真是白眼狼。”
        </p>
        <p>尖锐刺耳的咆哮声从房间里隐隐传出。</p>
        <p>
          外门，秦意消瘦的身子微微颤抖了一下，干枯的双手紧紧握着轮椅的扶手，指骨泛白。
        </p>

        <p>
          随即，房间门被重重的拉开，一个身材臃肿，浑身充满庸俗气的妇人骂骂咧咧的走出来，差点撞到秦意的轮椅上。
        </p>
        <p>这个一脸恶相的女人就是秦意的丈母娘，董金淑。</p>

        <p>
          “死残废，好好劝劝你妹妹，别给我出幺蛾子。”董金淑满脸厌恶的看着秦意咆哮。
        </p>

        <p>
          秦意因为生病发白的薄唇紧紧的抿了抿，声音带着哀求，道：“妈，婉儿还小，那个刘成文是个植物人，嫁过去婉儿一辈子就毁了。”
        </p>

        <p>
          “我警告你，不嫁给刘少，我就断了你那个废物哥哥的药，让他自生死灭。”
        </p>
        <p>
          “我们夏家养了你们兄妹这么多年，现在让你付出一点都不愿意，真是白眼狼。”
        </p>
        <p>尖锐刺耳的咆哮声从房间里隐隐传出。</p>
        <p>
          外门，秦意消瘦的身子微微颤抖了一下，干枯的双手紧紧握着轮椅的扶手，指骨泛白。
        </p>

        <p>
          随即，房间门被重重的拉开，一个身材臃肿，浑身充满庸俗气的妇人骂骂咧咧的走出来，差点撞到秦意的轮椅上。
        </p>
        <p>这个一脸恶相的女人就是秦意的丈母娘，董金淑。</p>

        <p>
          “死残废，好好劝劝你妹妹，别给我出幺蛾子。”董金淑满脸厌恶的看着秦意咆哮。
        </p>

        <p>
          秦意因为生病发白的薄唇紧紧的抿了抿，声音带着哀求，道：“妈，婉儿还小，那个刘成文是个植物人，嫁过去婉儿一辈子就毁了。”
        </p>

        <p>
          “我警告你，不嫁给刘少，我就断了你那个废物哥哥的药，让他自生死灭。”
        </p>
        <p>
          “我们夏家养了你们兄妹这么多年，现在让你付出一点都不愿意，真是白眼狼。”
        </p>
        <p>尖锐刺耳的咆哮声从房间里隐隐传出。</p>
        <p>
          外门，秦意消瘦的身子微微颤抖了一下，干枯的双手紧紧握着轮椅的扶手，指骨泛白。
        </p>

        <p>
          随即，房间门被重重的拉开，一个身材臃肿，浑身充满庸俗气的妇人骂骂咧咧的走出来，差点撞到秦意的轮椅上。
        </p>
        <p>这个一脸恶相的女人就是秦意的丈母娘，董金淑。</p>

        <p>
          “死残废，好好劝劝你妹妹，别给我出幺蛾子。”董金淑满脸厌恶的看着秦意咆哮。
        </p>

        <p>
          秦意因为生病发白的薄唇紧紧的抿了抿，声音带着哀求，道：“妈，婉儿还小，那个刘成文是个植物人，嫁过去婉儿一辈子就毁了。”
        </p>

        <div class="footer-Details">本章未完,点击[下一页]继续阅读-->></div>
      </div>

      <div class="navbox-Details">
        <div class="nav-Details">上一页</div>
        <div class="nav-Details">目录</div>

        <div class="nav-Details con">下一页</div>
      </div>

      <div class="foot-Details"  v-show="isshow">
        <div class="topbox">
          <div class="left">
            <div class="svg">
              <svg
                t="1667203819076"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1759"
                width="200"
                height="200"
              >
                <path
                  d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
                  p-id="1760"
                  fill="#c7c7c7"
                ></path>
                <path
                  d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
                  p-id="1761"
                  fill="#c7c7c7"
                ></path>
              </svg>
            </div>

            <p>上一页</p>
          </div>

          <div class="right">
            <p>下一页</p>
            <div class="svg">

              <svg
                t="1667206364069"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2537"
                width="200"
                height="200"
              >
                <path
                  d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z"
                  p-id="2538"
                  fill="#a7a7a7"
                ></path>
                <path
                  d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z"
                  p-id="2539"
                  fill="#a7a7a7"
                ></path>
              </svg>

            </div>
          </div>
        </div>

        <div class="bottombox" >
          <div class="box">
          
              <svg
                t="1667218826584"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3629"
                width="200"
                height="200"
              >
                <path
                  d="M106.666667 192a21.333333 21.333333 0 1 0 0 42.666667h85.333333a21.333333 21.333333 0 0 0 0-42.666667H106.666667z m0 298.666667a21.333333 21.333333 0 0 0 0 42.666666h85.333333a21.333333 21.333333 0 0 0 0-42.666666H106.666667z m0 298.666666a21.333333 21.333333 0 0 0 0 42.666667h85.333333a21.333333 21.333333 0 0 0 0-42.666667H106.666667zM320 192a21.333333 21.333333 0 0 0 0 42.666667h597.333333a21.333333 21.333333 0 0 0 0-42.666667H320z m0 298.666667a21.333333 21.333333 0 0 0 0 42.666666h597.333333a21.333333 21.333333 0 0 0 0-42.666666H320z m0 298.666666a21.333333 21.333333 0 0 0 0 42.666667h597.333333a21.333333 21.333333 0 0 0 0-42.666667H320z"
                  fill="#a6a6a6"
                  p-id="3630"
                ></path>
              </svg>
           
            <p>目录</p>
          </div>

          <div class="box">

              <svg
                t="1667219422196"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8685"
                width="200"
                height="200"
              >
                <path
                  d="M430.72 721.92l-24.64-64.768L196.544 657.152l-24.64 66.112c-9.6 25.792-17.792 43.264-24.576 52.224-6.784 9.024-17.92 13.568-33.408 13.568-13.12 0-24.704-4.8-34.752-14.464C69.056 765.056 64 754.176 64 742.016c0-7.04 1.152-14.336 3.52-21.824s6.208-17.92 11.648-31.296l131.84-334.784c3.776-9.536 8.256-21.12 13.504-34.56C229.76 305.984 235.456 294.784 241.408 285.952c5.952-9.024 13.824-16.192 23.616-21.696C274.688 258.816 286.656 256 300.992 256 315.52 256 327.616 258.816 337.344 264.256c9.728 5.504 17.6 12.608 23.616 21.312 5.952 8.64 11.008 17.984 15.04 27.968s9.344 23.296 15.68 39.872l134.656 332.672c10.624 25.344 15.872 43.776 15.872 55.232 0 11.968-4.992 22.848-14.976 32.832-9.92 9.984-21.952 14.976-35.968 14.976-8.256 0-15.232-1.472-21.12-4.352-5.888-2.944-10.752-6.912-14.72-12.032s-8.256-12.8-12.864-23.232C438.016 739.136 434.048 729.92 430.72 721.92zM224 578.816l153.984 0L300.288 366.08 224 578.816zM854.848 734.912c-23.232 18.048-45.696 31.616-67.392 40.64-21.632 9.024-46.016 13.568-72.96 13.568-24.64 0-46.272-4.864-64.96-14.656-18.624-9.664-33.024-22.848-43.072-39.552-10.048-16.64-15.104-34.688-15.104-54.144 0-26.24 8.32-48.64 25.024-67.136 16.64-18.56 39.424-30.976 68.544-37.312 6.144-1.408 21.248-4.544 45.376-9.472s44.8-9.408 62.08-13.568c17.216-4.032 35.968-9.088 56.064-14.912C847.36 513.088 842.24 494.528 833.28 482.624c-9.088-11.84-27.776-17.664-56.128-17.664-24.384 0-42.752 3.392-54.976 10.112-12.288 6.784-22.848 17.024-31.68 30.656-8.832 13.568-14.912 22.592-18.624 26.88-3.648 4.352-11.456 6.528-23.36 6.528-10.816 0-20.096-3.456-27.968-10.368C612.608 521.792 608.704 512.96 608.704 502.144c0-16.896 6.016-33.28 17.92-49.216 12.032-15.936 30.656-29.056 55.872-39.36 25.344-10.304 56.896-15.488 94.656-15.488 42.24 0 75.392 4.992 99.52 14.912 24.192 9.984 41.28 25.728 51.2 47.296s14.912 50.176 14.912 85.824c0 22.528-0.064 41.6-0.128 57.344-0.128 15.68-0.384 33.152-0.576 52.416 0 17.984 2.944 36.8 8.96 56.384S960 744.448 960 750.08c0 9.792-4.608 18.816-13.888 26.944-9.28 8.064-19.776 12.096-31.488 12.096-9.856 0-19.584-4.672-29.184-13.888C875.84 765.952 865.6 752.512 854.848 734.912zM848.512 595.968c-14.08 5.184-34.496 10.688-61.376 16.384-26.816 5.76-45.376 9.984-55.744 12.672-10.24 2.688-20.096 8-29.504 15.808-9.344 7.872-14.08 18.816-14.08 32.896 0 14.528 5.504 26.944 16.576 37.12 11.008 10.176 25.344 15.296 43.264 15.296 19.008 0 36.48-4.16 52.48-12.48 16.128-8.32 27.904-19.072 35.392-32.192 8.704-14.528 12.992-38.464 12.992-71.68L848.512 595.968z"
                  p-id="8686"
                  fill="#a6a6a6"
                ></path>
              </svg>
          
            设置
          </div>

          <div class="box" @click="nighttime">
    
              <svg
                t="1667219653236"
                class="icon"
                viewBox="0 0 1025 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13176"
                width="200"
                height="200"
              >
                <path
                  d="M542.331247 955.220693a431.045474 431.045474 0 0 1-21.360033-861.450146 32.467251 32.467251 0 0 1 28.408844 14.311222 32.04005 32.04005 0 0 1 1.922403 31.82645A363.120567 363.120567 0 0 0 514.563204 299.040467a367.606174 367.606174 0 0 0 367.178974 368.033375H899.471005a32.25365 32.25365 0 0 1 30.331248 46.137672 427.200668 427.200668 0 0 1-387.471006 242.009179z m-69.633708-790.321235A366.965373 366.965373 0 1 0 845.857322 729.65874 431.686275 431.686275 0 0 1 450.483104 299.040467a427.200668 427.200668 0 0 1 22.214435-135.209011z"
                  p-id="13177"
                  fill="#ffffff"
                ></path>
              </svg>

            夜间
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isshow:false,
      ys1:true,
  
    }
  },
methods:{
  nighttime(){

      this.$refs.ContentDetails.style.background="#0c0c0c"
    this.$refs.main.style.color="#545454"
   
  
  }
}

};
</script>

<style lang="scss" scoped>
.ContentDetails {
  // background: #0c0c0c;
  .header-Details {
    background-color: #222222;
    position: fixed;
    width: 100%;

    .head-Details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        padding: 12px;
        .icon {
          width: 20px;
          height: 30px;
        }
      }

      .right {
        padding: 12px;
        display: flex;
        .icon {
          width: 20px;
          height: 20px;
          margin-left: 20px;
        }
      }
    }
  }
  .main {
    padding: 20px 16px;
    h3 {
      padding: 10px 0px;
      border-bottom: 1px solid #6c6c6c;
      margin-bottom: 8px;
      font-size: 22px;
    }
    p {
      text-align: justify;
      text-indent: 2em;
      text-justify: inter-ideograph;
      padding: 4px 0px;
      font-size: 20px;
    }
    .footer-Details {
      padding-top: 20px;
      padding-bottom: 10px;
    }
  }
  .navbox-Details {
    padding: 0px 16px;
    display: flex;
    padding-bottom: 10px;
    justify-content: space-between;
    .nav-Details {
      padding: 4px 10px;
      border: 1px solid #b2e3d9;
      color: #b2e3d9;
    }
    .con {
      background-color: #1abc9c;
    }
  }

  .foot-Details {
    position: fixed;
    width: 100%;
    bottom: 0px;
    background-color: #222222;
    .topbox {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #2e2e2e;
      .left {
        padding: 6px 12px;
        display: flex;
        align-items: center;
        border-right: 2px solid #2e2e2e;
        p {
          font-size: 14px;
          color: #fff;
        }

        .svg {
          padding-top: 5px;
          margin-right: 4px;
          .icon {
            width: 20px;
            height: 30px;
          }
        }
      }

      .right {
        display: flex;
        padding: 6px 12px;
        align-items: center;
        border-left: 2px solid #2e2e2e;
        p {
          font-size: 14px;
          color: #fff;
        }
        .svg {
          padding-top: 5px;
          margin-left: 4px;
          .icon {
            width: 20px;
            height: 30px;
          }
        }
      }
    }

    .bottombox {
      display: flex;
      justify-content: space-around;
      padding:10px 0px;
      .box {
        color: #fff;
        font-size: 12px;
        display: flex;
        text-align: center;
        flex-direction: column;
       
        .icon {
            width: auto;
            height: 20px;
          }

        p {
          font-size: 12px;
          color: #fff;
      
        }
      }


    }
  }
}
</style>